<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">教师</el-breadcrumb-item>
      <el-breadcrumb-item>校内课题实践</el-breadcrumb-item>
      <el-breadcrumb-item>发布历史</el-breadcrumb-item>
    </el-breadcrumb>

    <div>
      <h2 style="border-bottom: 1px solid;padding-bottom: 10px;">发布历史</h2>
    </div>

    <!-- 表格1 -->
    <div style="margin: 3% 5% 3% 5%;">
      <!-- 下拉框 -->
      <el-row :gutter="20" style=" margin-top: 20px; ">
        <el-col :span="3">
          <div class="grid-content ep-bg-purple">
            <el-button type="primary" :icon="Plus" @click="toTaskBase">添加</el-button>
          </div>
        </el-col>
      </el-row>


      <el-table :data="myPublish" height="550" style="width: 100%; margin-top: 10px;">
        <el-table-column prop="taskName" label="题目" />
        <el-table-column prop="className" label="发布班级" />
        <el-table-column prop="memberMax" label="课题人数" />
        <el-table-column prop="startDate" label="发布时间" :formatter="formatDate" />
        <el-table-column prop="endDate" label="结束时间" :formatter="formatDate" />
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="toPost(scope.row.publishId)">详情</el-button>
            <el-button link type="danger" size="small" @click="deleteTopic(scope.row.publishId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { ArrowRight, Calendar, Search, Plus } from '@element-plus/icons-vue'
import { ref, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import requests from '@/api/ajax';

const router_useRouter = useRouter()

//获取任务详情的参数并跳转到任务详情页
function toPost(id) {
  router_useRouter.push({
    path: 'innerDetail',
    query: { publishId: id }
  })
}

onBeforeMount(() => {
  //初始显示题库数据
  const asd = requests({ url: "/inner/MyInnerPublish", method: "get", }).then(res => {
    //存储用户信息到浏览器toke
    const abc = res.rdata
    myPublish.value = abc
  })
    .catch(err => {
      console.error(err.data);
      // 登录请求失败后的操作
    });
})

//从后台获取的发布过所有的校内实践
const myPublish = ref([{
  publishId: "",
  memberMax: "",
  taskName: "",
  content: "",
  scaleRule: "",
  startDate: "",
  endDate: "",
  planId: "",
  courseId: "",
  courseName: "",
  majorName: "",
  enrolDate: "",
  practicalId: "",
  classId: "",
  className: "",
  adviserId: "",
  adviserName: "",
  teachId: "",
  teachName: "",
  practicalType: "",
  onloadDate: ""
}])

//修改时间格式
function formatDate(row, column, cellValue, index) {
  let format = 'YYYY-mm-dd'
  let date = new Date(cellValue);
  const dataItem = {
    'Y+': date.getFullYear().toString(),
    'm+': (date.getMonth() + 1).toString(),
    'd+': date.getDate().toString(),
  }
  Object.keys(dataItem).forEach((item) => {
    const ret = new RegExp(`(${item})`).exec(format);
    if (ret) {
      format = format.replace(ret[1], ret[1].length === 1 ? dataItem[item] : dataItem[item].padStart(ret[1].length, '0'));
    }
  });
  return format
}

const value = ref('')

const courseDate = [
  {
    value: 'Option1',
    label: '2019年6月',
  },
  {
    value: 'Option2',
    label: '2019年12月',
  },
  {
    value: 'Option3',
    label: '2020年6月',
  },
  {
    value: 'Option4',
    label: '2020年12月',
  },
]
// 题目种类
const typeOptions = [
  {
    value: 'Option1',
    label: '算法设计',
  },
  {
    value: 'Option2',
    label: '基础编程',
  },
  {
    value: 'Option3',
    label: '逻辑判断',
  },
  {
    value: 'Option4',
    label: '通用',
  },
]

// 课程类型
const courseOptions = [
  {
    value: 'Option1',
    label: 'C语言程序设计',
  },
  {
    value: 'Option2',
    label: 'C#程序设计',
  },
  {
    value: 'Option3',
    label: '算法设计',
  },
  {
    value: 'Option4',
    label: '数据结构',
  },
]

const classSelect = ref([
  {
    classId: '1',
    className: 'RB软工互191'
  },
  {
    classId: '2',
    className: 'RB软工互192'
  },
  {
    classId: '3',
    className: 'RB软工互193'
  },
])
const input1 = ''

// 表格1数据
const tableData = [
  {
    taskId: '图书管理系统',
    major: '互联网',
    teacher: '殷凡卓',
    course: 'C语言程序设计',
    classId: 'RB软工互192',
    maxMember: '2'
  },
  {
    taskId: '图书管理系统',
    major: '互联网',
    teacher: '殷凡卓',
    course: 'C语言程序设计',
    classId: 'RB软工互192',
    maxMember: '2'
  },
  {
    taskId: '图书管理系统',
    major: '互联网',
    teacher: '殷凡卓',
    course: 'C语言程序设计',
    classId: 'RB软工互192',
    maxMember: '2'
  },
  {
    taskId: '图书管理系统',
    major: '互联网',
    teacher: '殷凡卓',
    course: 'C语言程序设计',
    classId: 'RB软工互193',
    maxMember: '2'
  },
  {
    taskId: '图书管理系统',
    major: '互联网',
    teacher: '殷凡卓',
    course: 'C语言程序设计',
    classId: 'RB软工互191',
    maxMember: '2'
  },
  {
    taskId: '图书管理系统',
    major: '互联网',
    teacher: '殷凡卓',
    course: 'C语言程序设计',
    classId: 'RB软工互193',
    maxMember: '2'
  },
  {
    taskId: '图书管理系统',
    major: '互联网',
    teacher: '殷凡卓',
    course: 'C语言程序设计',
    classId: 'RB软工互193',
    maxMember: '2'
  },
  {
    taskId: '图书管理系统',
    major: '互联网',
    teacher: '殷凡卓',
    course: 'C语言程序设计',
    classId: 'RB软工互191',
    maxMember: '2'
  },
  {
    taskId: '图书管理系统',
    major: '互联网',
    teacher: '殷凡卓',
    course: 'C语言程序设计',
    classId: 'RB软工互191',
    maxMember: '2'
  },
]

function toTaskBase() {
  router_useRouter.push({ path: 'innerPublish' })
}

//删除过程任务
const deleteTopic = (publishId) => {
  ElMessageBox.confirm(
    '是否确认删除？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      const asd = requests({ url: "/inner/InnerPublish/" + publishId, method: "delete", }).then(res => {
        if (res.code === 20021) {
          ElMessage({
            message: res.msg,
            type: 'success',
          })
          const asd = requests({ url: "/inner/MyInnerPublish", method: "get", }).then(res => {
            //存储用户信息到浏览器toke
            myPublish.value = res.rdata
          })
            .catch(err => {
              console.error(err.data);
              // 登录请求失败后的操作
            });
        } else if (res.code === 20020) {
          alert(res.msg)
        } else {
          alert('发生错误，请查看服务器问题')
        }
      })
        .catch(err => {
          console.error(err.data);
          // 登录请求失败后的操作
        });
    })

}


</script>